import React from 'react';
import "./index.css"
import { ActionSheet } from 'antd-mobile';

/**
 * 弹出一个空的ActionSheet
 *
 * @param {element} 内容纯自定义
 */
export function showActionSheet(element) {
    ActionSheet.showActionSheetWithOptions({
        options: [],
        message: element ? element : <div>空</div>,
        maskClosable: false,
    });
}

/**
 * 关闭actionSheet
 */
export function closeActionSheet() {
    ActionSheet.close()
}



/**
 * 下面在弹出的actionSheet上弄一个标准的（标题/关闭）菜单
 *
 * 如果不需要，也可以自行定义UI，使用上面的 showActionSheet(element) 和 closeActionSheet() 方法
 */

export default class MZActionSheet extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {

    }

    close = () => {
        closeActionSheet()
        if (this.props.close) {
            this.props.close();
        }
    }

    render() {
        return (
            <div className="mz-action-sheet-background" style={{height: this.props.height ? this.props.height + 'rem' : '10rem'}}>
                <div className="mz-action-sheet-menu">
                    <button className="mz-action-sheet-close" onClick={this.close}></button>
                    <div className="mz-action-sheet-name">{this.props.title || '标题'}</div>
                </div>
                <div className="mz-action-sheet-content-background" style={{height: this.props.height ? (this.props.height - 0.91) + 'rem' : '9.09rem'}}>
                    {this.props.children}
                </div>

            </div>
        )
    }
}
